<template>
	<NavBar icon="left" title="我的集运券" />
	<view class="contain">
		<view class="bg-white header pt-2">
			<!-- 券信息分类头部 -->
			<view class="flex ">
				<view class="flex-col text-center flex-1">
					<view>可用数量</view>
					<text>0（张)</text>
				</view>
				<view class="flex-col text-center flex-1">
					<view>可用金额</view>
					<text>0（张)</text>
				</view>
				<view class="flex-col text-center flex-1">
					<view>过期数量</view>
					<text>0（张)</text>
				</view>
			</view>
			<!-- 券状态 -->
			<view class="time pt-2 flex justify-around">
				<view class="p-1 m-1" @click="doOrderStatus(index)" :class="{ 'active': index === statusIndex }"
					v-for="(item, index) in orderStatus" :key="item.name">
					{{ item.name }}
				</view>
			</view>
		</view>
		<view class="list-box">
			<view :class="{QuanCard:statusIndex}" v-for="item in list">
				<QuanCard :item="item" />
				<image v-if="statusIndex" class="lose_efficacy w-[100px] h-[60px]" src="@/static/img/lose_efficacy.png">
				</image>
			</view>
		</view>
	</view>
</template>

<script setup>
	import * as api from '@/api/modules/consolidation_voucher.js'
	import store from '@/store/index.js' 
	import dayjs from 'dayjs'
	let statusIndex = ref(0)
	const orderStatus = ref([{
			name: '可使用'
		}, {
			name: '已到期'
		}])
	 const form = ref({
			userId: 2,
			isUsed: 0,
			dateType: 3,
			endDate: null,
			startDate: null
		})

	const list = ref([])
 
 form.value.startDate = dayjs().format('YYYY/MM/DD HH:mm:ss') 
 
	const doOrderStatus = (index) => {
		statusIndex.value = index
		if (index === 0) {
			form.value.startDate = dayjs().format('YYYY/MM/DD HH:mm:ss') 
			delete form.value.endDate
		} else {
			form.value.endDate = dayjs().format('YYYY/MM/DD HH:mm:ss') 
			delete form.value.startDate
		}
		queryUserCoupon()
	}

	const queryUserCoupon = async () => {
		const {
			rows
		} = await api.queryUserCouponAPI(form.value)
		list.value = rows
	}
	
	queryUserCoupon()
</script>

<style lang="scss">
	.contain {
		height: calc(100vh - 44px);
		background: #f2f2f2;
		border-top: 1px solid #ccc;

		.header {
			height: 16%;
		}

		.p-1 {
			position: relative;
			cursor: pointer;

			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 0;
				height: 2px;
				background-color: #61aef1;
				transition: width 0.3s ease;
				/* 添加过渡效果 */
			}
		}

		.active {
			color: #61aef1;

			&::after {
				width: 260%;
				/* 点击时触发宽度变化 */
			}
		}

		.flex-col {
			color: #797e9e;
		}


		.list-box {
			height: 84%;
			background: #f2f2f2;
			overflow-y: auto;
		}

		.quan-card {
			height: 90px;

			.left {
				background: linear-gradient(to bottom, #faf5bc, #f2d294);
				border-top: 4px solid #fff;
				border-bottom: 4px solid #fff;
				border-left: 4px solid #fff;
			}

			.circle {
				width: 50px;
				/* 设置宽度 */
				height: 50px;
				/* 设置高度 */
				border-radius: 50%;
				/* 将边角设置为50%，即变成圆形 */
				background: linear-gradient(to bottom, #f8efb5, #f4d99c);
			}

			.circle-b {
				color: #e66368;
				font-weight: 700;
				line-height: 56px;
				text-align: center;
				font-size: 16px;
				width: 56px;
				/* 设置宽度 */
				height: 56px;
				border-radius: 50%;
				/* 将边角设置为50%，即变成圆形 */
				background: linear-gradient(to bottom, #f8efb5, #f4d99c);
			}


		}
	}

	.QuanCard {
		position: relative;

		.lose_efficacy {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}
</style>